<template>
    <span id="getCode" @click="getCode"><em v-show="isTimeDown">倒计时(</em>{{content}}<em
            v-show="isTimeDown">)</em></span>
</template>

<script>
    const regMobile = /^1[3|5|6|7|8|9]\d{9}$/
    export default {
        name: "getCode",
        props: ['mobile'],
        data() {
            return {
                content: "发送验证码",
                isTimeDown: false,
            };
        },
        mounted() {},
        methods: {
            showLoading(msg) {
                this.$loading.show(msg)
                setTimeout(() => {
                    this.$loading.hide()
                }, 1000);
            },
            getCode() {
                console.log(this.mobile);
                if (this.mobile) {
                    
                    if (!regMobile.test(this.mobile)) {
                        this.showLoading('请填写正确的手机号')
                        return
                    }
                    let timer
                    this.content = 60
                    this.isTimeDown = true
                    clearInterval(timer)
                    timer = setInterval(() => {
                        if (this.content > 1) {
                            this.content--
                        } else {
                            clearInterval(timer)
                            this.content = "发送验证码"
                            this.isTimeDown = false
                        }
                    }, 1000)
                    this.$emit('getcode', true)
                } else {
                    this.showLoading("请输入手机号")
                }
            }

        },
    };
</script>

<style lang='scss'>
    #getCode {
        display: inline-block;
        vertical-align: middle;
        width: 80px;
        height: 35px;
        line-height: 35px;
        background-color: rgb(241, 239, 239);
        color: rgb(0, 0, 0);
        text-align: center;
        border-radius: 4px;
        margin-left: 3px;

        em {
            font-style: normal;
        }
    }
</style>